<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" header="基本信息">
              <a-row :gutter="48">
                <a-col :span="8">
                  <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="documentNo">
                    <a-input :disabled=formDisabled v-model="model.documentNo" placeholder="请输入单据编号" disabled ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="录入人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createBy">
                    <select-user-by-dep :disabled=formDisabled  :multi="false" v-model="model.createBy" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                    <a-input :disabled=formDisabled v-model="model.createTime" :show-time="true" date-format="YYYY-MM-DD HH:mm" placeholder="请输入创建日期" style="width: 100%"  disabled ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="所属单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="affiliatedUnit">
<!--                    <a-input :disabled=formDisabled v-model="model.affiliatedUnit" placeholder="请输入所属单位"  ></a-input>-->
                    <!-- <j-select-depart placeholder="请选择所属单位" :disabled="formDisabled" v-model="model.affiliatedUnit"/> -->
                    <!--TASK#2609车辆信息-所属单位字段确定数据来源-->
                    <select-Company-input :disabled="formDisabled" v-model="model.affiliatedUnit"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="所属团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teamId">
                    <select-team-input
                      :disabled="formDisabled"
                      placeholder="请选择费用所属团队" 
                      v-model="model.teamId" 
                      :tdlx="3" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="车辆名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carName">
                    <a-input :disabled=formDisabled v-model="model.carName" placeholder="请输入车辆名称"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="车牌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carNum">
                    <a-input :disabled=formDisabled v-model="model.carNum" placeholder="请输入车牌"  ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="车辆类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carType">
                    <j-dict-select-tag :disabled=formDisabled type="list" @input="changeCarType" dictCode="car_type_oa" v-model="model.carType" placeholder="请选择车辆类型" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="座位数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carSeatNum">
                    <j-dict-select-tag v-show="model.carType == '' ||model.carType == null || model.carType == undefined " :disabled=formDisabled type="list" v-model="model.carSeatNum" dictCode="car_seat_num" placeholder="请选择座位数" />
                    <j-dict-select-tag v-show="model.carType == '1' " :disabled=formDisabled type="list" v-model="model.carSeatNum" dictCode="car_seat_num_carriage" placeholder="请选择座位数" />
                    <j-dict-select-tag v-show="model.carType == '2' " :disabled=formDisabled type="list" v-model="model.carSeatNum" dictCode="car_seat_num_mpv" placeholder="请选择座位数" />
                    <j-dict-select-tag v-show="model.carType == '3' " :disabled=formDisabled type="list" v-model="model.carSeatNum" dictCode="car_seat_num_van" placeholder="请选择座位数" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="购置日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="purchaseTime">
                    <j-date :disabled=formDisabled placeholder="请选择购置日期" v-model="model.purchaseTime" :show-time="true" date-format="YYYY-MM-DD HH:mm" style="width: 100%" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="车辆状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carState">
                    <j-dict-select-tag :disabled=formDisabled type="list" v-model="model.carState" dictCode="car_state" placeholder="请选择车辆状态" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="初次购买保险时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstBuyInsuranceTime">
                    <a-date-picker
                      show-time
                      :disabled="formDisabled"
                      placeholder="请选择初次购买保险时间"
                      v-model="firstBuyInsuranceTime"
                      @change="(date, dateStr) => {
                        this.$set(this.model, 'firstBuyInsuranceTime',dateStr);
                        this.$set(this.model, 'insuranceEndTime', null)
                        this.insuranceEndTime = null;
                      }"
                      format="YYYY-MM-DD HH:mm:ss"
                      style="width: 100%"/>
<!--                    <j-date :disabled=formDisabled placeholder="请选择初次购买保险时间" v-model="model.firstBuyInsuranceTime" :show-time="true" date-format="YYYY-MM-DD HH:mm" style="width: 100%" />-->
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="保险到期时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="insuranceEndTime">
                    <a-date-picker
                      show-time
                      :disabled="formDisabled"
                      placeholder="请选择保险到期时间"
                      v-model="insuranceEndTime"
                      @change="(date, dateStr) => { this.$set(this.model, 'insuranceEndTime', dateStr) }"
                      :disabledDate="disabledTenderEndDate"
                      format="YYYY-MM-DD HH:mm:ss"
                      style="width: 100%"/>
<!--                    <j-date :disabled=formDisabled placeholder="请选择保险到期时间" v-model="model.insuranceEndTime" :show-time="true" date-format="YYYY-MM-DD HH:mm" style="width: 100%" />-->
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="车辆管理员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carAdmin">
<!--                    <select-person-input :disabled=formDisabled  placeholder="请选择车辆管理员" v-model="model.carAdmin"></select-person-input>-->
                    <select-user-by-dep :disabled=formDisabled  :multi="false" v-model="model.carAdmin"  />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
          <!-- 租赁信息 -->
          <a-collapse-panel key="2" header="租赁信息">
            <a-row :gutter="48">
            <a-col :span="8">
              <a-form-model-item label="租赁方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="leaseType">
                <j-dict-select-tag :disabled=formDisabled type="list" v-model="model.leaseType" dictCode="lease_type" placeholder="请选择租赁方式" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="租金（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rent">
                <a-input :disabled=formDisabled v-model="model.rent" placeholder="请输入租金（元）"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>
              </a-form-model-item>
            </a-col>
            </a-row>
           </a-collapse-panel>
              <!-- 附件信息 -->
            <a-collapse-panel key="3" header="附件信息">
              <a-row :gutter="48">
                <a-col :span="24">
                  <a-form-model-item label="附件信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileInfo">
                    <j-upload :disabled=formDisabled v-model="model.fileInfo"   ></j-upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

import { getAction, httpAction } from '@/api/manage'
import { mapGetters } from 'vuex';
import moment from 'moment';
import SelectUserByDep from '@/views/scy/components/SelectUserByDep';
import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput';
import SelectTeamInput from '@/views/scy/components/SelectTeamInput';

export default {
    name: 'ErpCarInfoForm',
    components: {
      SelectUserByDep,
      SelectCompanyInput,// 公司弹窗
      SelectTeamInput,// 团队弹窗
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    watch: {
      activeKey(key) {
        this.$forceUpdate()
      }
    },
    data () {
      return {
        activeKey: ['1','2','3'],
        model:{
         },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        confirmLoading: false,
        validatorRules: {
          carName: [
            { required: true, message: '请输入车辆名称!', trigger: 'blur'},
          ],
          carNum: [
            { required: true, message: '请输入车牌!', trigger: 'blur'},
          ],
          leaseType: [
            { required: true, message: '请选择租赁方式!', trigger: 'blur'},
          ],
          rent: [
            { required: true, message: '请输入租金（元）!', trigger: 'blur'},
            { pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确租金（元）!' },
          ]
        },
        url: {
          add: "/api/erp/oa/car/erpCarInfo/add",
          edit: "/api/erp/oa/car/erpCarInfo/edit",
          queryById: "/api/erp/oa/car/erpCarInfo/queryById",
          gainBillNo: "/api/erp/finance/borrow/erpFinanceLoanBill/gainBillNo",
          generatedFormNumber: '/api/erp/base/generatedFormNumber'

        },
        firstBuyInsuranceTime: undefined,
        insuranceEndTime: undefined
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      ...mapGetters(['userInfo']),
      getBillNo () {
        const that = this
        const handlerId = this.userInfo().empId
        getAction(this.url.gainBillNo, { handlerId }).then((res)=>{
          if(res.success){
            that.model.documentNo = res.result//单据编号
          }
        })
      },
      generatedFormNumber() {
        getAction(this.url.generatedFormNumber, { prefix: 'CLBM', subSystemCode: '04' }).then(res => {
          if (res.success) {
            this.$set(this.model, 'documentNo', res.result)
          }
        })
      },
      add () {
        this.edit(this.modelDefault);
        // this.getBillNo(); //获取单据编号
        this.model.createBy = this.userInfo().empName;//申请人名称
        // this.model.affiliatedUnit =  this.userInfo().deptId;//申请人单位
        // this.model.createBy = this.userInfo().empId; //申请人
        this.model.createTime = moment().format('YYYY-MM-DD HH:mm');
        this.firstBuyInsuranceTime = null;
        this.insuranceEndTime = undefined;
        this.generatedFormNumber();
      },
      edit (record) {
        this.$refs["form"].clearValidate();
        this.model = Object.assign({}, record);
        console.log(this.model)
        this.firstBuyInsuranceTime = this.model.firstBuyInsuranceTime;
        this.insuranceEndTime = this.model.insuranceEndTime;
        this.visible = true;
      },
      submitForm () {
        console.log(this.model)
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          } else {
            that.$emit('unButtonDisable');
          }

        })
      },
      disabledTenderEndDate(currentDate) {
        return currentDate < moment(this.model.firstBuyInsuranceTime).subtract('day')
      },
      changeCarType() {
        this.$set(this.model, 'carSeatNum', '')
      }
    }
  }
</script>
